<!-- 工具条 -->
<template>
    <div class="toolbar">
        <div class="nav-container">
            <!-- logo -->
            <div class="left-wrap">
                <div class="nav-logo" title="退出">
                    <!-- <img class="svg-size" src="../../image/main/toolbar/icon_quit_home.svg" @click.stop="quitVisible = true" title="退出" /> -->
                </div>
            </div>
            <!-- 顶部菜单 -->
            <div class="middle-menu-wrap">
                <div class="display">
                    <div :class="['item', active.id === item.id ? 'active' : '']" v-for="(item, index) in menuData" :key="index" @click="menuClick(item, index, 'menu')">
                        {{item.label}}
                    </div>
                </div>
                <div class="display">
                    <div class="item2" :title="'清空画布' + '\n' + 'Ctrl+E'" @click="shortcut.clearCanvas()">
                        <img class="svg-size" src="../../image/main/toolbar/icon_clear_canvas.svg" />
                    </div>
                    <!-- <div class="item2" title="下载参数" @click="downloadParams">
                        <img class="svg-size" src="../../image/main/toolbar/icon_download.svg" />
                    </div>
                    <div class="item2" title="上传本地参数">
                        <el-upload class="upload-demo" ref="upload" accept=".txt" action="#" :limit="1" :auto-upload="true" :show-file-list="false" :on-change="uploadOpenFile" :before-upload="uploadParamFile" style="margin: auto -5px;">
                            <img class="svg-size" src="../../image/main/toolbar/icon_upload.svg" alt="" />
                        </el-upload>
                    </div> -->
                    <div class="item2" :title="'保存' + '\n' + 'Ctrl+S'" @click="saveProject">
                        <img class="svg-size" src="../../image/main/toolbar/icon_save.svg" />
                    </div>
                    <div class="item2" title="自动保存时间">
                        <el-popover placement="bottom" width="100" trigger="click">
                            <div :style="{background: shortcut.saveTime === item.value ? '#3662ec' : '' }" class="pop-item" v-for="(item, index) in saveTimeList" :key="index" @click="updateAutoSave(item.value)">
                                {{item.label}}
                            </div>
                            <div slot="reference">
                                <img class="svg-size" src="../../image/main/toolbar/icon_unfold.svg" />
                            </div>
                        </el-popover>
                    </div>
                    <!-- <div class="item-share" @click="shareVisible = true">分享</div> -->
                    <div class="item2" title="预览" @click="preview">
                        <img class="svg-size" src="../../image/main/toolbar/icon_preview.svg" />
                    </div>
                    <!-- <div class="item2" title="退出" @click="quitVisible = true">
                        <img class="svg-size" src="../../image/main/toolbar/icon_quit.svg" />
                    </div> -->
                </div>
            </div>
        </div>
        <div class="nav-bottom-column">
            <div class="left-tabs box"></div>
            <!-- 组件操作按钮 -->
            <div class="middle-btn box">
                <div class="display">
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1" v-if="user.getPanel() === 'true'">
                        <div slot="content">选择</div>
                        <div class="item" :class="{ 'active': mapActive == 0 }" @click="setMapLinkage(false, 0)">
                            <img class="svg-size" src="../../image/main/toolbar/icons_select_def.svg" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1">
                        <div slot="content">撤销 <br /> Ctrl+Z</div>
                        <div class="item" :class="history.historyIndex <= 0 ? 'button-disabled': ''" @click="state = history.moveToPrevious(); if (state) { store.set(state); register.redrawAll(); line.initialize(); line.setElementList(store.getElementList()); }">
                            <img class="svg-size" src="../../image/main/toolbar/icon_revocation.svg" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1">
                        <div slot="content">恢复 <br /> Ctrl+Y</div>
                        <div class="item" :class="history.historyIndex >= history.historyList.length - 1 ? 'button-disabled': ''" @click="state = history.moveToNext(); if (state) { store.set(state); register.redrawAll(); line.initialize(); line.setElementList(store.getElementList()); }">
                            <img class="svg-size" src="../../image/main/toolbar/icon_recover.svg" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1">
                        <div slot="content">插入图片(.gif,.bmp,.jpg,.jpeg,.png,.svg)</div>
                        <div class="item">
                            <FileUpload fileType="01" componentType="media" buttonStyle="icon" width="20px" height="20px" img="icon_img.svg" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1">
                        <div slot="content">组件锁定 <br /> Ctrl+L</div>
                        <div class="item">
                            <img class="svg-size" src="../../image/main/toolbar/icon_lock.svg" @click="shortcut.setElementLock(true)" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1">
                        <div slot="content">组件解锁 <br /> Ctrl+U</div>
                        <div class="item">
                            <img class="svg-size" src="../../image/main/toolbar/icon_unlock.svg" @click="shortcut.setElementLock(false)" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1" v-if="user.getPanel() === 'true'">
                        <div slot="content">漫游</div>
                        <div class="item" :class="{ 'active': mapActive == 1 }" @click="setMapLinkage(true, 1)">
                            <img class="svg-size" src="../../image/main/toolbar/icon_pointer.svg" />
                        </div>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" placement="bottom" :open-delay="200" :hide-after="1" v-if="user.getPanel() === 'true'">
                        <div slot="content">重置</div>
                        <div class="item" @click="$store.commit('setReset')">
                            <img class="svg-size" src="../../image/main/toolbar/icon_reset.svg" />
                        </div>
                    </el-tooltip>
                </div>
                <div class="display">
                    <div class="btn-label">画布大小：</div>
                    <el-input type="number" style="width: 40px;" size="mini" v-model="canvas.width" @input="canvasSizeChange" @change="history.addHistory(store.clone(), 12)"></el-input>
                    &nbsp;*&nbsp;
                    <el-input type="number" style="width: 40px;" size="mini" v-model="canvas.height" @input="canvasSizeChange" @change="history.addHistory(store.clone(), 12)"></el-input>
                    <div class="btn-label">画布比例：</div>
                    <div class="resize-icon" @click="setCanvasScale('minus')">
                        <img class="svg-size" src="../../image/main/toolbar/canvas_minus.svg">
                    </div>
                    <div class="resize-input">
                        <el-popover placement="bottom" width="180" trigger="click">
                            <div class="cover-slider">
                                <el-slider :show-tooltip="false" :show-input-controls="false" v-model.number="canvas.scale" :step='1' :min="0" :max="200" />
                            </div>
                            <el-divider></el-divider>
                            <div class="pop-item" @mousedown="setCanvasScale('plus')">
                                放大
                                <i class="el-icon-plus"></i>
                            </div>
                            <div class="pop-item" @mousedown="setCanvasScale('minus')">
                                缩小
                                <i class="el-icon-minus"></i>
                            </div>
                            <el-divider></el-divider>
                            <div class="pop-item" @mousedown="autoCanvasScale">
                                适应画布
                                <img class="canvas-img" src="../../image/main/toolbar/icon_selfscreen.svg" />
                            </div>
                            <div class="pop-item" @mousedown="setCanvasPercentScale">
                                100%
                                <img class="canvas-img" src="../../image/main/toolbar/icon_fullscreen.svg" />
                            </div>
                            <div slot="reference">
                                <el-input style="width: 40px;" size="mini" v-model.number="canvas.scale" @focus="canvasSiderVisible = true" @blur="canvasSiderVisible = false">
                                    <span slot="suffix">%</span>
                                </el-input>
                            </div>
                        </el-popover>
                    </div>
                    <div class="resize-icon" @click="setCanvasScale('plus')">
                        <img class="svg-size" src="../../image/main/toolbar/canvas_plus.svg">
                    </div>
                </div>
            </div>
            <!-- 对齐方式 -->
            <div class="right-container-wrapper box">
                <div class="item" title="左对齐" @click="elementLeftJustify">
                    <img src="../../image/main/toolbar/align_1.svg" />
                </div>
                <div class="item" title="右对齐" @click="elementRightJustify">
                    <img src="../../image/main/toolbar/align_3.svg" />
                </div>
                <div class="item" title="顶对齐" @click="elementTopJustify">
                    <img src="../../image/main/toolbar/align_4.svg" />
                </div>
                <div class="item" title="底对齐" @click="elementBottomJustify">
                    <img src="../../image/main/toolbar/align_6.svg" />
                </div>
                <div class="item" title="水平平均分布" @click="elementHorizontalAverageJustify">
                    <img src="../../image/main/toolbar/align_7.svg" />
                </div>
                <div class="item" title="垂直平均分布" @click="elementVerticalAverageJustify">
                    <img src="../../image/main/toolbar/align_8.svg" />
                </div>
                <el-popover placement="bottom" width="170" trigger="click">
                    <div class="item" title="分布位置和尺寸" slot="reference">
                        <img src="../../image/main/toolbar/icon_unfold.svg" />
                    </div>
                    <div class="distribute-size">
                        <div class="size-row">
                            <div class="single" title="左分布对齐" @click="elementLeftAlign">
                                <img src="../../image/main/toolbar/icon_left.svg" />
                            </div>
                            <div class="single" title="右分布对齐" @click="elementRightAlign">
                                <img src="../../image/main/toolbar/icon_right.svg" />
                            </div>
                            <div class="single" title="上分布对齐" @click="elementTopAlign">
                                <img src="../../image/main/toolbar/icon_top.svg" />
                            </div>
                            <div class="single" title="下分布对齐" @click="elementBottomAlign">
                                <img src="../../image/main/toolbar/icon_bottom.svg" />
                            </div>
                        </div>
                        <div class="size-row">
                            <div class="single" title="3:1" @click="elementThreeToOneAlign">
                                <img src="../../image/main/toolbar/icon_3_1.svg" />
                            </div>
                            <div class="single" title="4:1" @click="elementFourToOneAlign">
                                <img src="../../image/main/toolbar/icon_4_1.svg" />
                            </div>
                            <div class="single" title="8:1" @click="elementEightToOneAlign">
                                <img src="../../image/main/toolbar/icon_8_1.svg" />
                            </div>
                        </div>
                        <div class="size-row">
                            <div class="single" @click="elementNinePalace" title="3:3">
                                <img src="../../image/main/toolbar/icon_9.svg" />
                            </div>
                            <div class="single" @click="elementSixteenPalace" title="4:4">
                                <img src="../../image/main/toolbar/icon_16.svg" />
                            </div>
                            <div class="single" @click="elementFivePalace" title="5:5">
                                <img src="../../image/main/toolbar/icon_25.svg" />
                            </div>
                        </div>
                    </div>
                </el-popover>
            </div>
        </div>
        <!-- 组件弹窗 -->
        <div class="popover" v-if="active.id">
            <div class="pop-title">
                <span>
                    <img v-show="subActive.label" src="../../image/main/toolbar/icon_pop_back.svg" @click="goBack">
                </span>
                <span>{{subActive.label ? subActive.label : active.name}}</span>
                <span>
                    <i class="el-icon-close" @click="closePop"></i>
                </span>
            </div>
            <div class="pop-main" :id="window.getRootName() + 'TOOLBAR_POP'" v-if="active.id && user.getPanel() !== 'true'" @dragstart="elementDragStart">
                <!-- 自定义组件 -->
                <div class="pop-main-display" v-show="!subActive.label">
                    <div class="pop-main-card" v-if="active.id === 'Simple'" style="cursor: pointer" @click="uploadCustomElement">
                        <i class="el-icon-plus" style="font-size: 30px;"></i>
                        <div draggable="false">添加组件</div>
                    </div>
                    <div v-else :style="{ cursor: item.children ? 'pointer' : 'grab'}" class="pop-main-card media-card" :draggable="item.children ? false : true" :data-index="item.id" v-for="(item, index) in menuData[active.index].children" :key="index" @click="menuClick(item, index, 'element')">
                        <img class="pop-img" :src="getPreview(item.icon)" draggable="false" v-if="active.id === 'Template'" :title="item.label" :style="{ cursor: 'default'}">
                        <img class="pop-img" :src="item.icon" draggable="false" v-else>
                        <div draggable="false" class="element-name" :title="item.label">{{item.label}}</div>
                        <div class="custom-edit" v-if="item.component === 'Simple' && active.id === 'Simple'">
                            <i class="el-icon-edit" @click.stop="editCustomElement(item, index)"></i>
                            <i class="el-icon-delete" @click.stop="deleteCustomElement(item, 'simple')"></i>
                        </div>
                    </div>
                </div>
                <div class="pop-main-display" v-show="subActive.label">
                    <!-- 默认 -->
                    <div class="pop-main-display" v-if="(subActive.label !== '通用图标') && (active.id === 'VText' || active.id === 'Shape' || active.id === 'Map')">
                        <div class="pop-main-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                            <img class="pop-img" :src="item.icon" draggable="false">
                            <div draggable="false">{{item.label}}</div>
                        </div>
                    </div>
                    <!-- 通用图标 -->
                    <div class="pop-main-display" v-if="subActive.label === '通用图标'">
                        <div class="pop-general-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                            <svg class="toolbar-icon pop-charts-img" aria-hidden="true">
                                <use :xlink:href="'#' + item.propValue"></use>
                            </svg>
                        </div>
                    </div>
                    <!-- 统计大图 -->
                    <div class="pop-main-display" v-if="active.id === 'Echarts'">
                        <div class="pop-charts-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                            <img class="pop-charts-img" :src="item.icon" draggable="false">
                        </div>
                    </div>
                    <!-- 通用 -->
                    <div class="pop-main-display" v-if="active.id === 'Common'">
                        <div v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                            <div class="pop-main-card" v-if="item.component === 'VIframe' || item.component === 'carouselTextModel' || item.component === 'Menu' || item.component === 'CarouselText' || item.component === 'VHtml'">
                                <img class="pop-img" :src="item.icon" draggable="false">
                                <div draggable="false">{{item.label}}</div>
                            </div>
                            <div class="pop-charts-card" v-else>
                                <img class="pop-charts-img" :src="item.icon" draggable="false">
                            </div>
                        </div>
                    </div>
                    <!-- 多媒体 -->
                    <div class="pop-main-display" v-if="active.id === 'multiMedia'">
                        <!-- 图片 -->
                        <div class="pop-main-display" v-show="subActive.label === '图片'">
                            <el-tooltip class="item2" effect="dark" content="插入图片(.gif,.bmp,.jpg,.jpeg,.png,.svg)" placement="bottom">
                                <div class="pop-main-card" style="cursor: pointer" draggable="false">
                                    <FileUpload fileType="01" componentType="media" buttonStyle="icon" width="40px" height="40px" @errorFun="deleteErrorVisible = true" />
                                </div>
                            </el-tooltip>
                            <div class="pop-main-card media-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                                <img :src="getImgUrl(item, index)" draggable="false">
                                <span class="media-delect" @click="deleteMedia(item, 'pic')">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </div>
                        </div>
                        <!-- 视频 -->
                        <div class="pop-main-display" v-if="subActive.label === '视频'">
                            <el-tooltip class="item2" effect="dark" content="插入视频.mp4" placement="bottom">
                                <div class="pop-main-card" style="cursor: pointer" draggable="false">
                                    <FileUpload fileType="02" componentType="media" buttonStyle="icon" width="40px" height="40px" @errorFun="deleteErrorVisible = true" />
                                </div>
                            </el-tooltip>
                            <div class="pop-main-card media-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                                <img :src="getImgUrl(item, index)" draggable="false">
                                <span class="media-delect" @click="deleteMedia(item, 'video')">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </div>
                        </div>
                        <!-- 流媒体 -->
                        <div class="pop-main-display" v-if="subActive.label === '流媒体'">
                            <div v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id">
                                <div class="pop-main-card">
                                    <img class="pop-img" :src="item.icon" draggable="false">
                                    <div draggable="false">{{item.label}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 功能 -->
                    <div class="pop-main-display" v-if="active.id === 'Function'">
                        <div class="pop-main-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" :title="item.label">
                            <svg-icon :icon-class="item.icon" class="icon-card"></svg-icon>
                            <div draggable="false">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="pop-main" :id="window.getRootName() + 'TOOLBAR_POP'" v-if="active.id && user.getPanel() === 'true'">
                <!-- 自定义组件 -->
                <div class="pop-main-display" v-show="!subActive.label">
                    <div class="pop-main-card" v-if="active.id === 'Simple'" style="cursor: pointer" @click="uploadCustomElement">
                        <i class="el-icon-plus" style="font-size: 30px;"></i>
                        <div draggable="false">添加组件</div>
                    </div>
                    <div :style="{ cursor: item.children ? 'pointer' : 'grab'}" class="pop-main-card media-card" :draggable="item.children ? false : true" :data-index="item.id" v-for="(item, index) in menuData[active.index].children" :key="index" @click="menuClick(item, index, 'element')">
                        <img class="pop-img" :src="getPreview(item.icon)" draggable="false" v-if="active.id === 'Template'" :title="item.label" :style="{ cursor: 'default'}">
                        <img class="pop-img" :src="item.icon" draggable="false" v-else v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}" @click="elementClick($event,item.id)">
                        <div draggable="false" class="element-name">{{item.label}}</div>
                        <div class="custom-edit" v-if="item.component === 'Simple' && active.id === 'Simple'">
                            <i class="el-icon-edit" @click="editCustomElement(item, index)"></i>
                            <i class="el-icon-delete" @click="deleteCustomElement(item, 'simple')"></i>
                        </div>
                    </div>
                </div>
                <div class="pop-main-display" v-show="subActive.label">
                    <!-- 默认 -->
                    <div class="pop-main-display" v-if="(subActive.label !== '通用图标') && (active.id === 'VText' || active.id === 'Shape' || active.id === 'Map')">
                        <div class="pop-main-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}" @click="elementClick($event,item.id)">
                            <img class="pop-img" :src="item.icon">
                            <div>{{item.label}}</div>
                        </div>
                    </div>
                    <!-- 通用图标 -->
                    <div class="pop-main-display" v-if="subActive.label === '通用图标'">
                        <div class="pop-general-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}" @click="elementClick($event,item.id)">
                            <svg class="toolbar-icon pop-charts-img" aria-hidden="true">
                                <use :xlink:href="'#' + item.propValue"></use>
                            </svg>
                        </div>
                    </div>
                    <!-- 统计大图 -->
                    <div class="pop-main-display" v-if="active.id === 'Echarts'">
                        <div class="pop-charts-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}" @click="elementClick($event,item.id)">
                            <img class="pop-charts-img" :src="item.icon" draggable="false">
                        </div>
                    </div>
                    <!-- 通用 -->
                    <div class="pop-main-display" v-if="active.id === 'Common'">
                        <div v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}" @click="elementClick($event,item.id)">
                            <div class="pop-main-card" v-if="item.component === 'VIframe' || item.component === 'carouselTextModel' || item.component === 'Menu' || item.component === 'CarouselText' || item.component === 'VHtml'">
                                <img class="pop-img" :src="item.icon" draggable="false">
                                <div draggable="false">{{item.label}}</div>
                            </div>
                            <div class="pop-charts-card" v-else>
                                <img class="pop-charts-img" :src="item.icon" draggable="false">
                            </div>
                        </div>
                    </div>
                    <!-- 多媒体 -->
                    <div class="pop-main-display" v-if="active.id === 'multiMedia'">
                        <!-- 图片 -->
                        <div class="pop-main-display" v-show="subActive.label === '图片'">
                            <el-tooltip class="item2" effect="dark" content="插入图片(.gif,.bmp,.jpg,.jpeg,.png,.svg)" placement="bottom">
                                <div class="pop-main-card" style="cursor: pointer" draggable="false">
                                    <FileUpload fileType="01" componentType="media" buttonStyle="icon" width="40px" height="40px" @errorFun="deleteErrorVisible = true" />
                                </div>
                            </el-tooltip>
                            <div class="pop-main-card media-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" @click="elementClick($event,item.id)">
                                <img :src="getImgUrl(item, index)" draggable="false" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}">
                                <span class="media-delect" @click.stop="deleteMedia(item, 'pic')">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </div>
                        </div>
                        <!-- 视频 -->
                        <div class="pop-main-display" v-if="subActive.label === '视频'">
                            <el-tooltip class="item2" effect="dark" content="插入视频(.MP4)" placement="bottom">
                                <div class="pop-main-card" style="cursor: pointer" draggable="false">
                                    <FileUpload fileType="02" componentType="media" buttonStyle="icon" width="40px" height="40px" @errorFun="deleteErrorVisible = true" />
                                </div>
                            </el-tooltip>
                            <div class="pop-main-card media-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" @click="elementClick($event,item.id)">
                                <img :src="getImgUrl(item, index)" draggable="false" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}">
                                <span class="media-delect" @click.stop="deleteMedia(item, 'video')">
                                    <i class="el-icon-delete"></i>
                                </span>
                            </div>
                        </div>
                        <!-- 流媒体 -->
                        <div class="pop-main-display" v-if="subActive.label === '流媒体'">
                            <div v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" @click="elementClick($event,item.id)" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}">
                                <div class="pop-main-card">
                                    <img class="pop-img" :src="item.icon" draggable="false">
                                    <div draggable="false">{{item.label}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 功能 -->
                    <div class="pop-main-display" v-if="active.id === 'Function'">
                        <div class="pop-main-card" v-for="(item, index) in subTree" :key="index" draggable :data-index="item.id" :title="item.label" @click="elementClick($event,item.id)" v-Draggable="{row:item,revert:true,proxy:$refs.proxy,dragStart:onDragStart}">
                            <svg-icon :icon-class="item.icon" class="icon-card"></svg-icon>
                            <div draggable="false">{{item.label}}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 上传自定义组件弹窗 -->
        <el-dialog title="上传自定义组件" :visible.sync="customElementVisible" width="600px" top="35vh">
            <div>
                <el-row class="custom-component">
                    <el-col :span="6" class="custom-component-name">
                        <span class="tipe">*</span>自定义组件名称：
                    </el-col>
                    <el-col :span="18">
                        <el-input v-model="customComponent.name" placeholder="请输入内容" @blur="checkCustomName(customComponent.name)" />
                        <span class="tipe" v-show="nameTipeVisible">请输入自定义组件名称</span>
                    </el-col>
                </el-row>
                <el-row class="custom-component">
                    <el-col :span="6" class="custom-component-name">
                        <span class="tipe">*</span>自定义组件文件：
                    </el-col>
                    <el-col :span="18">
                        <el-upload :auto-upload="false" :on-remove="removeFile" accept=".zip,.7z,.tar" :file-list="customComponent.fileList" :limit="1" ref="upload" action="#" :on-change="uploadSuccess">
                            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        </el-upload>
                        <span class="tipe" v-show="fileTipeVisible">请选择自定义组件</span>
                    </el-col>
                </el-row>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelCustomUpload">取 消</el-button>
                <el-button type="primary" :disabled="util.isBlank(customComponent.name) || customComponent.fileList < 1" @click="submitComponentUpload(customComponent.file)">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="提示" :visible.sync="quitVisible" width="500px" top="35vh">
            <div>此操作将退出，是否继续?</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="quitVisible = false">取 消</el-button>
                <el-button @click="goHome(false)">直接退出</el-button>
                <el-button type="primary" @click="goHome(true)">保存并退出</el-button>
            </span>
        </el-dialog>

        <el-dialog title="本地" :visible.sync="shareVisible" width="435px" top="35vh" class="review-dialog" :close-on-click-modal="false" @open="openShareDialog" @close="closeShareDialog">
            <el-form :model="shareForm" :rules="rules" label-position="top" ref="shareForm" class="query-form" @submit.native.prevent>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="shareForm.name"></el-input>
                </el-form-item>
                <div class="query-form-dic">
                    <p>分享到桌面的快捷方式。</p>
                    <p>通过快捷方式可以快速访问大屏和场景。</p>
                </div>
            </el-form>
            <span slot="footer">
                <div class="share-btn" @click="shareProject('shareForm')">确定</div>
            </span>
        </el-dialog>
        <div ref="proxy" style="display: none"></div>
        <el-dialog title="" :visible.sync="deleteInfoVisible" width="435px" top="35vh" class="review-dialog-no-t" :close-on-click-modal="false">
            <div class="dialog-content">
                <img src="../../image/main/toolbar/icon_Error.svg" alt="">
                <div class="dialog-content-c">
                    <p class="t">媒体资源无法删除</p>
                    <p class="b">此媒体资源在其他项目中被引用<br/>请先删除相关控件后再操作</p>
                </div>
            </div>
            <span slot="footer">
                <div class="share-btn" @click="deleteInfoVisible = false">知道了</div>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="deleteErrorVisible" width="435px" top="35vh" class="review-dialog-no-t" :close-on-click-modal="false">
            <div class="dialog-content">
                <img src="../../image/main/toolbar/icon_Error.svg" alt="">
                <div class="dialog-content-c">
                    <p class="t">媒体资源上传失败</p>
                    <p class="b">此媒体格式不支持上传到资源<br/>请检查媒体的兼容性</p>
                </div>
            </div>
            <span slot="footer">
                <div class="share-btn" @click="deleteErrorVisible = false">知道了</div>
            </span>
        </el-dialog>

        <el-dialog title="" :visible.sync="deleteMediaVisible" width="435px" top="35vh" class="review-dialog-no-t" :close-on-click-modal="false">
            <div class="dialog-content">
                <img src="../../image/main/toolbar/icon_Warning.svg" alt="">
                <div class="dialog-content-c">
                    <p class="t">删除媒体资源</p>
                    <p class="b">删除媒体会同时删除相关的控件对象。<br/>此操作无法撤销</p>
                </div>
            </div>
            <div slot="footer" class="_footer">
                <div class="com-btn delete-btn mr-10" @click="deleteHandleMedia">删除</div>
                <div class="com-btn cancle-btn" @click="deleteMediaVisible = false">取消</div>
            </div>
        </el-dialog>

        <el-dialog title="" :visible.sync="templateDialog.visible" width="435px" top="35vh" class="review-dialog-no-t" :close-on-click-modal="false">
            <div class="dialog-content">
                <div class="dialog-content-c">
                    <p class="t">模板插入到当前场景中</p>
                </div>
            </div>
            <div slot="footer" class="_footer">
                <div class="com-btn cancle-btn mr-10" @click="insertTempleteHandle">确定</div>
                <div class="com-btn cancle-btn" @click="templateDialog.visible = false">取消</div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import tree from '@/js/main/tree.js';
import store from '@/js/store/state.js';
import util from '@/js/util/util.js';
import FileUpload from '@/view/component/FileUpload.vue';
import base from '@/js/main/attribute/base.js';
import template from '@/js/element/template.js';
import status from '@/js/main/status.js';
import postion from '@/js/store/postion.js';
import bus from '@/js/event/bus.js';
import history from '@/js/main/history.js';
import shortcut from '@/js/main/shortcut.js';
import line from '@/js/main/line.js';
import register from '@/js/main/register.js';
import message from '@/js/util/message.js';
import PATH from '@/js/util/path.js';
import upload from '@/js/util/upload.js';
import system from '@/js/main/system.js';
import coder from '@/js/main/coder.js';
import loadingImg from '@/image/main/toolbar/toolbar_loading.svg';
import user from '@/js/util/user.js';
import request from '@/js/util/url.js';
import { updateTemplate, insertTemplate } from '@/js/util/api.js';
import {versionList} from '@/js/util/version.js';
import scene from '@/js/main/scene.js';
import { mapGetters } from "vuex";
import config from '@/js/util/config.js';
import icon_default from '@/image/scene/icon_default.svg';

export default {
    data() {
        return {
            window: window,
            history: history,
            store: store,
            shortcut: shortcut,
            register: register,
            line: line,
            bus: bus,
            user: user,
            status: status,
            menuData: [],
            base: base,
            util: util,
            canvas: store.getCanvas(),
            subTree: [],
            active: {},
            subActive: {},
            canvasSiderVisible: false,
            customElementVisible: false,
            elementList: store.getElementList(),
            currentElementList: store.getCurrentElementList(),
            quitVisible: false,
            leftSpace: 15,
            topSpace: 85,
            space: 25,
            customComponent: {
                filename: '',
                name: '',
                file: null,
                fileList: []
            },
            saveTimeList: [
                { value: 0, label: '禁用' },
                { value: 300000, label: '5分钟' },
                { value: 600000, label: '10分钟' },
                { value: 900000, label: '15分钟' },
                { value: 1200000, label: '20分钟' },
                { value: 1500000, label: '25分钟' },
                { value: 1800000, label: '30分钟' }
            ],
            resourceList: [],
            recorScrolldNum: 18,
            nameTipeVisible: false,
            fileTipeVisible: false,
            shareVisible: false,
            shareForm: {
                name: '',
                expiretime: ''
            },
            rules: {
                name: [
                    { required: false, message: '请输入名称', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                expiretime: [{ required: false, message: '请选择日期和时间', trigger: 'change' }]
            },
            elementId: '',
            deleteErrorVisible: false,
            deleteMediaVisible: false,
            deleteInfoVisible: false,
            deleteObj: {
                type: '',
                id: ''
            },
            templateDialog: {
                id: '',
                visible: false
            }
        };
    },
    components: {
        FileUpload
    },
    computed: {
        ...mapGetters(["mapActive"]),
    },
    mounted() {
        if (user.getPanel() === 'true') {
            this.setMapLinkage(false, 0);
            this.menuData = tree.filter((res) => res.id !=='Map'); // explorer嵌入取消 地图模块
            bus.on('elementClick', this.elementClick);
        } else {
            this.menuData = tree;
        }
    },
    methods: {
        downloadParams() {
            let projectAttr = store.clone();
            this.exportRaw(projectAttr.canvas.name, JSON.stringify(projectAttr));
        },
        exportRaw(name, data) {
            let eleLink = document.createElement('a');
            eleLink.download = name;
            eleLink.style.display = 'none';
            let blob = new Blob([data]);
            eleLink.href = URL.createObjectURL(blob);
            document.body.appendChild(eleLink);
            eleLink.click();
            document.body.removeChild(eleLink);
        },
        checkCustomName(name) {
            if (util.isBlank(name)) {
                this.nameTipeVisible = true;
                this.customBtnDis = true;
            } else {
                this.nameTipeVisible = false;
                this.customBtnDis = false;
            }
        },
        removeFile() {
            this.customComponent.filename = '';
            this.customComponent.file = null;
            this.customComponent.fileList = [];
            this.fileTipeVisible = true;
        },
        editCustomElement(item) {
            coder.open();
            this.$nextTick(() => {
                coder.setID(item.id);
            });
        },
        deleteCustomElement(item, type) {
            let data = request.deleteMediaCheck({ token: user.getToken(), id: item.id });
            if (data.state.code == 10000) {
                if (data.body.message === 0) {
                    this.deleteInfoVisible = true;
                } else if (data.body.message === 1) {
                    this.deleteMediaVisible = true;
                    this.deleteObj.id = item.id;
                    this.deleteObj.type = type;
                }
            } else {
                message.message(data.body.message, 'error');
            }
        },
        uploadSuccess(file, fileList) {
            this.customComponent.filename = file.name;
            this.customComponent.file = file;
            this.customComponent.fileList = fileList;
            this.fileTipeVisible = false;
        },
        submitComponentUpload(file) {
            this.nameTipeVisible = false;
            this.fileTipeVisible = false;
            if (util.isBlank(this.customComponent.name)) {
                this.nameTipeVisible = true;
            }
            if (this.customComponent.fileList.length < 1) {
                this.fileTipeVisible = true;
            }
            if (util.isNotBlank(this.customComponent.name) && this.customComponent.fileList.length >= 1) {
                let attribute = {
                    name: this.customComponent.name,
                    chartset: 'GBK'
                };
                this.customElementVisible = false;
                this.cancelCustomUpload();
                // 提交上传
                let successFun = function() {
                    message.message('上传成功', 'success');
                    template.resetSimpleList();
                };
                upload.addFile(file.raw, 11, JSON.stringify(attribute), successFun);
            }
        },
        cancelCustomUpload() {
            this.customElementVisible = false;
            this.customComponent.name = '';
            this.customComponent.file = '';
            this.customComponent.fileList = [];
        },
        elementLeftAlign() {
            let widthPixel = this.currentElementList[0].style.width.pixel;
            let heightPixel = this.canvas.height - this.topSpace;
            let elementLength = this.currentElementList.length;
            for (let i = 0; i < elementLength; i++) {
                base.setTopPixel(this.currentElementList[i], this.canvas.height, i == 0 ? this.topSpace : i * (heightPixel / elementLength) + this.space + (this.topSpace - this.space), true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, this.leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightPixel / elementLength - this.space - 2, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthPixel, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
            }
            history.addHistory(store.clone(), 3);
        },
        elementRightAlign() {
            let widthPixel = this.currentElementList[0].style.width.pixel;
            let elementLength = this.currentElementList.length;
            let heightPixel = this.canvas.height - this.topSpace;
            let leftlength = this.canvas.width - this.currentElementList[0].style.width.pixel - this.leftSpace;
            for (let i = 0; i < elementLength; i++) {
                base.setTopPixel(this.currentElementList[i], this.canvas.height, i == 0 ? this.topSpace : i * (heightPixel / elementLength) + this.space + (this.topSpace - this.space), true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftlength, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightPixel / elementLength - this.space - 2, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthPixel, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
            }
            history.addHistory(store.clone(), 3);
        },
        elementTopAlign() {
            let elementLength = this.currentElementList.length;
            let widthPixel = this.canvas.width / elementLength - this.leftSpace - 3;
            let heightPixel = this.currentElementList[0].style.height.pixel;
            for (let i = 0; i < elementLength; i++) {
                base.setTopPixel(this.currentElementList[i], this.canvas.height, this.topSpace, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, i == 0 ? this.leftSpace : widthPixel * i + (i + 1) * this.leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightPixel, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthPixel, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
            }
            history.addHistory(store.clone(), 3);
        },
        elementBottomAlign() {
            let elementLength = this.currentElementList.length;
            let widthPixel = this.canvas.width / elementLength - this.leftSpace - 3;
            let heightPixel = this.currentElementList[0].style.height.pixel;
            let toplen = this.canvas.height - this.currentElementList[0].style.height.pixel - this.leftSpace;
            for (let i = 0; i < elementLength; i++) {
                base.setTopPixel(this.currentElementList[i], this.canvas.height, toplen, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, i == 0 ? this.leftSpace : widthPixel * i + (i + 1) * this.leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightPixel, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthPixel, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
            }
            history.addHistory(store.clone(), 3);
        },
        elementThreeToOneAlign() {
            let elementWidth = this.canvas.width / 2;
            let elementHeight = this.canvas.height;
            let elementLength = this.currentElementList.length;
            let leftSpace = 0;
            if (elementLength < 4) {
                elementHeight = util.toInteger(this.canvas.height / (elementLength - 1));
            } else {
                elementHeight = util.toInteger(this.canvas.height / 3);
            }
            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                let topValue = elementLength == pos || i == 0 || i == 3 ? 0 : i * elementHeight + 1;
                let leftValue = elementLength == pos || i == 3 ? elementWidth : leftSpace;
                let widthValue = elementWidth;
                let heightValue = elementLength == pos || i == 3 ? this.canvas.height : elementHeight;
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topValue, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftValue, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightValue, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthValue, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i >= 3) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        elementFourToOneAlign() {
            let elementWidth = this.canvas.width / 2;
            let elementHeight = this.canvas.height;
            let elementLength = this.currentElementList.length;
            let leftSpace = 0;
            if (elementLength < 5) {
                elementHeight = util.toInteger(this.canvas.height / (elementLength - 1));
            } else {
                elementHeight = util.toInteger(this.canvas.height / 4);
            }
            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                let topValue = i == 0 || elementLength == pos || i == 4 ? 0 : i * elementHeight;
                let leftValue = elementLength == pos || i == 4 ? elementWidth : leftSpace;
                let widthValue = elementWidth;
                let heightValue = elementLength == pos || i == 4 ? this.canvas.height : elementHeight;
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topValue, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftValue, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightValue, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthValue, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i >= 4) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        elementEightToOneAlign() {
            let elementLength = this.currentElementList.length;
            let elementLeftWidth = util.toInteger(this.canvas.width / 2 / 2);
            let elementLeftHeight = util.toInteger(this.canvas.height / elementLength);
            let elementRightWidth = util.toInteger(this.canvas.width / 2);
            let elementRightHeight = util.toInteger(this.canvas.height);
            let topSpace = 0;
            let leftSpace = 0;

            if (elementLength < 8) {
                if ((elementLength - 1) % 2 == 0) {
                    elementLeftHeight = util.toInteger(this.canvas.height / ((elementLength - 1) / 2));
                } else {
                    elementLeftHeight = util.toInteger(this.canvas.height / (elementLength / 2));
                    elementLeftWidth = elementLength <= 2 ? util.toInteger(this.canvas.width / 2) : util.toInteger(this.canvas.width / 2 / 2);
                }
            } else {
                elementLeftHeight = util.toInteger(this.canvas.height / 4);
            }

            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                if (pos % 2 == 0 && i < 8 && pos != elementLength) {
                    leftSpace = elementLeftWidth;
                    topSpace = pos == 2 ? 0 : (pos / 2 - 1) * elementLeftHeight;
                } else if (pos % 2 == 1 && pos != elementLength) {
                    leftSpace = 0;
                    topSpace = pos == 1 ? 0 : ((pos - 1) / 2) * elementLeftHeight;
                }
                let topValue = i == 8 || elementLength == pos ? 0 : topSpace;
                let leftValue = i == 8 || elementLength == pos ? elementRightWidth : leftSpace;
                let widthValue = i == 8 || elementLength == pos ? elementRightWidth : elementLeftWidth;
                let heightValue = i == 8 || elementLength == pos ? elementRightHeight : elementLeftHeight;
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topValue, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftValue, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, heightValue, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, widthValue, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i === 8) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        elementNinePalace() {
            let elementHeight = util.toInteger(this.canvas.height / 3);
            let elementWidth = util.toInteger(this.canvas.width / 3);
            let elementLength = this.currentElementList.length;
            let topSpace = 0;
            let leftSpace = 0;
            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                if (pos % 3 == 1) {
                    leftSpace = 0;
                    topSpace = (pos + 2) / 3 == 1 ? 0 : ((pos + 2) / 3 - 1) * elementHeight;
                } else if (pos % 3 == 2) {
                    leftSpace = elementWidth;
                    topSpace = (pos + 1) / 3 == 1 ? 0 : ((pos + 1) / 3 - 1) * elementHeight;
                } else if (pos % 3 == 0) {
                    leftSpace = 2 * elementWidth;
                    topSpace = pos / 3 == 1 ? 0 : (pos / 3 - 1) * elementHeight;
                }
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topSpace, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, elementHeight, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, elementWidth, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i >= 8) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        elementSixteenPalace() {
            let elementWidth = util.toInteger(this.canvas.width / 4);
            let elementHeight = util.toInteger(this.canvas.height / 4);
            let elementLength = this.currentElementList.length;
            let leftSpace = 0;
            let topSpace = 0;
            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                if (pos % 4 == 1) {
                    topSpace = ((pos + 3) / 4 - 1) * elementHeight;
                    leftSpace = 0;
                } else if (pos % 4 == 2) {
                    topSpace = ((pos + 2) / 4 - 1) * elementHeight;
                    leftSpace = elementWidth;
                } else if (pos % 4 == 3) {
                    topSpace = ((pos + 1) / 4 - 1) * elementHeight;
                    leftSpace = elementWidth * 2;
                } else if (pos % 4 == 0) {
                    topSpace = (pos / 4 - 1) * elementHeight;
                    leftSpace = elementWidth * 3;
                }
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topSpace, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, elementHeight, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, elementWidth, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i >= 15) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        elementFivePalace() {
            let elementWidth = util.toInteger(this.canvas.width / 5);
            let elementHeight = util.toInteger(this.canvas.height / 5);
            let elementLength = this.currentElementList.length;
            let leftSpace = 0;
            let topSpace = 0;
            for (let i = 0; i < elementLength; i++) {
                let pos = i + 1;
                if (pos % 5 == 1) {
                    topSpace = ((pos + 4) / 5 - 1) * elementHeight;
                    leftSpace = 0;
                } else if (pos % 5 == 2) {
                    topSpace = ((pos + 3) / 5 - 1) * elementHeight;
                    leftSpace = elementWidth;
                } else if (pos % 5 == 3) {
                    topSpace = ((pos + 2) / 5 - 1) * elementHeight;
                    leftSpace = elementWidth * 2;
                } else if (pos % 5 == 4) {
                    topSpace = ((pos + 1) / 5 - 1) * elementHeight;
                    leftSpace = elementWidth * 3;
                } else if (pos % 5 == 0) {
                    topSpace = (pos / 5 - 1) * elementHeight;
                    leftSpace = elementWidth * 4;
                }
                base.setTopPixel(this.currentElementList[i], this.canvas.height, topSpace, true);
                base.setLeftPixel(this.currentElementList[i], this.canvas.width, leftSpace, true);
                base.setHeightPixel(this.currentElementList[i], this.canvas.height, elementHeight, true);
                base.setWidthPixel(this.currentElementList[i], this.canvas.width, elementWidth, true);
                register.redraw(`${system.SYSTEM_EDIT_ELEMENT + this.currentElementList[i].id}`);
                if (i >= 24) {
                    break;
                }
            }
            history.addHistory(store.clone(), 3);
        },
        goHome(type = null) {
            if (type) {
                this.saveProject();
            }
            store.initialize();
            shortcut.clearAutoSaveTimer();
            this.$router.push({ path: PATH.SCENE });
        },
        saveProject() {
            shortcut.saveProject();
            this.setCharts();
            // if (store.state.elementList.length > 0) {
            //     shortcut.saveProject();
            //     // this.setCharts();
            // } else {
            //     message.message('请添加组件后保存！', 'warning');
            // }
        },
        updateAutoSave(time) {
            shortcut.updateAutoSave(time);
            this.setCharts();
        },
        setCharts() {
            if (user.getPanel() === 'true') {
                let obj = this.$route.query;
                this.$store.dispatch('setChartsParams', { layout: obj.layout ? obj.layout : '1', model: obj.model ? obj.model : '2', id: scene.getID() });
            }
        },
        // 打开本地txt
        uploadOpenFile(file) {
            let textMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
            if (textMsg !== 'txt') return;
            let _this = this;
            let reader = new FileReader();
            reader.readAsText(file.raw);
            reader.onload = function(e) {
                const data = JSON.parse(reader.result);
                store.set(data);
            };
        },
        // 只做文件类型验证，阻止文件上传
        uploadParamFile(file) {
            let textMsg = file.name.substring(file.name.lastIndexOf('.') + 1);
            return new Promise((resolve, reject) => {
                if (textMsg === 'txt') {
                    reject();
                } else {
                    message.message('上传文件只能是txt格式!', 'warning');
                    reject();
                }
            });
        },
        elementLeftJustify() {
            let mixLeft = this.currentElementList[0].style.left.pixel;
            for (let i = 0; i < this.currentElementList.length; i++) {
                let leftValue = this.currentElementList[i].style.left.pixel;
                if (leftValue < mixLeft) {
                    mixLeft = leftValue;
                }
            }
            for (let index = 0; index < this.currentElementList.length; index++) {
                base.setLeftPixel(this.currentElementList[index], this.canvas.width, mixLeft, true);
            }
            history.addHistory(store.clone(), 3);
        },
        elementRightJustify() {
            let maxRight = this.currentElementList[0].style.left.pixel + this.currentElementList[0].style.width.pixel;
            for (let i = 0; i < this.currentElementList.length; i++) {
                let rightValue = this.currentElementList[i].style.left.pixel + this.currentElementList[i].style.width.pixel;
                if (rightValue > maxRight) {
                    maxRight = rightValue;
                }
            }
            for (let index = 0; index < this.currentElementList.length; index++) {
                base.setLeftPixel(this.currentElementList[index], this.canvas.width, maxRight - this.currentElementList[index].style.width.pixel, true);
            }
            history.addHistory(store.clone(), 3);
        },
        elementTopJustify() {
            let mixTop = this.currentElementList[0].style.top.pixel;
            for (let i = 0; i < this.currentElementList.length; i++) {
                let toptValue = this.currentElementList[i].style.top.pixel;
                if (toptValue < mixTop) {
                    mixTop = toptValue;
                }
            }
            for (let index = 0; index < this.currentElementList.length; index++) {
                base.setTopPixel(this.currentElementList[index], this.canvas.height, mixTop, true);
            }
            history.addHistory(store.clone(), 3);
        },
        elementBottomJustify() {
            let maxBottom = this.currentElementList[0].style.top.pixel + this.currentElementList[0].style.height.pixel;
            for (let i = 0; i < this.currentElementList.length; i++) {
                let bottomValue = this.currentElementList[i].style.top.pixel + this.currentElementList[i].style.height.pixel;
                if (bottomValue > maxBottom) {
                    maxBottom = bottomValue;
                }
            }
            for (let index = 0; index < this.currentElementList.length; index++) {
                base.setTopPixel(this.currentElementList[index], this.canvas.height, maxBottom - this.currentElementList[index].style.height.pixel, true);
            }
            history.addHistory(store.clone(), 3);
        },
        elementVerticalAverageJustify() {
            let leftData = [];
            let widthData = [];
            let minLeft = this.currentElementList[0].style.left.pixel;
            let maxRight = this.currentElementList[0].style.left.pixel + this.currentElementList[0].style.width.pixel;
            let indices00 = [];
            for (let i = 0; i < this.currentElementList.length; i++) {
                indices00.push(this.currentElementList.length - i - 1);
                let leftValue = this.currentElementList[i].style.left.pixel;
                let rightValue = this.currentElementList[i].style.left.pixel + this.currentElementList[i].style.width.pixel;
                let widthValue = this.currentElementList[i].style.width.pixel;
                leftData.push(leftValue);
                widthData.push(widthValue);
                if (leftValue < minLeft) {
                    minLeft = leftValue;
                }
                if (rightValue > maxRight) {
                    maxRight = rightValue;
                }
            }
            let subWidth = 0;
            for (var i = 0; i < widthData.length; i++) {
                subWidth += widthData[i];
            }
            let crossValue = (maxRight - minLeft - subWidth) / (this.currentElementList.length - 1);
            let indices = [...leftData.keys()].sort((a, b) => leftData[a] - leftData[b]); // 最大最小值的下标的排序
            for (let j = 1; j < indices.length; j++) {
                let index = indices[j];
                let editIndex = indices[j - 1];
                let leftCoor = this.currentElementList[editIndex].style.left.pixel + this.currentElementList[editIndex].style.width.pixel;
                base.setLeftPixel(this.currentElementList[index], this.canvas.width, leftCoor + crossValue, true);
            }
            history.addHistory(store.clone(), 3);
        },
        elementHorizontalAverageJustify() {
            let topData = [];
            let heightData = [];
            let minTop = this.currentElementList[0].style.top.pixel;
            let maxBottom = this.currentElementList[0].style.top.pixel + this.currentElementList[0].style.height.pixel;
            for (let i = 0; i < this.currentElementList.length; i++) {
                let topValue = this.currentElementList[i].style.top.pixel;
                let bottomValue = this.currentElementList[i].style.top.pixel + this.currentElementList[i].style.height.pixel;
                let heightValue = this.currentElementList[i].style.height.pixel;
                topData.push(topValue);
                heightData.push(heightValue);
                if (topValue < minTop) {
                    minTop = topValue;
                }
                if (bottomValue > maxBottom) {
                    maxBottom = bottomValue;
                }
            }
            let subHeight = 0;
            for (var i = 0; i < heightData.length; i++) {
                subHeight += heightData[i];
            }
            let lengValue = (maxBottom - minTop - subHeight) / (this.currentElementList.length - 1);
            let indices = [...topData.keys()].sort((a, b) => topData[a] - topData[b]); // 最大最小值的下标的排序
            for (let j = 1; j < indices.length; j++) {
                let index = indices[j];
                let editIndex = indices[j - 1];
                let topCoor = this.currentElementList[editIndex].style.top.pixel + this.currentElementList[editIndex].style.height.pixel;
                base.setTopPixel(this.currentElementList[index], this.canvas.height, topCoor + lengValue, true);
            }
            history.addHistory(store.clone(), 3);
        },
        uploadCustomElement() {
            this.customElementVisible = true;
        },
        deleteMedia(item, type) {
            let data = request.deleteMediaCheck({ token: user.getToken(), id: item.id });
            if (data.state.code == 10000) {
                if (data.body.message === 0) {
                    this.deleteInfoVisible = true;
                } else if (data.body.message === 1) {
                    this.deleteMediaVisible = true;
                    this.deleteObj.id = item.id;
                    this.deleteObj.type = type;
                }
            } else {
                message.message(data.body.message, 'error');
            }
        },
        deleteHandleMedia() {
            const { type, id } = this.deleteObj;
            if (type === 'pic') {
                template.removeResource(id, ['01']);
                this.deleteMediaElement(this.elementList, 'Picture', id);
            } else if (type === 'video') {
                template.removeResource(id, ['02']);
                this.deleteMediaElement(this.elementList, 'Video', id);
            } else if (type === 'simple') {
                template.removeElement(id);
                this.deleteMediaElement(this.elementList, 'Simple', id);
            }
            this.deleteMediaVisible = false;
        },
        deleteMediaElement(elementList, type, id, group = '', pid = '', flag) {
            let mediaList = [];
            for (let index = 0; index < elementList.length; index++) {
                const element = elementList[index];
                if (element.component === type || element.component === 'Group') {
                    mediaList.push(element)
                }
            }
            for (let index = 0; index < mediaList.length; index++) {
                let element = mediaList[index];
                if (Object.prototype.toString.call(element.data) === '[object Object]') {
                    if (element.component === 'Simple') {
                        if (element.id === id) {
                            store.removeElement(element);
                        }
                    } else {
                        if (element.component === 'Group') {
                            let children = element.attribute.children;
                            let pid = element.id;
                            let len = children.find((n) => n.component === type).length;
                            this.deleteMediaElement(children, type, id, 'Group', pid, children.length === len ? true : false);
                        }
                    }
                } else if (Object.prototype.toString.call(element.data) === '[object Array]') {
                    if (element.data.length) {
                        let i = element.data.findIndex((n) => n.id === id);
                        if (group === 'Group') {
                            if (element.data.length > 1 && i > -1) {
                                element.data.splice(i, 1);
                            } else if (i > -1) {
                                let j = this.elementList.findIndex((_) => _.id = pid);
                                let mi = this.elementList[j].attribute.children.findIndex((_) => _.id = id);
                                this.elementList[j].attribute.children.splice(mi, 1);
                            }
                        } else {
                            if (element.data.length > 1 && i > -1) {
                                element.data.splice(i, 1);
                            } else if (i > -1) {
                                store.removeElement(element);
                            }
                        }
                    }
                }
            }
        },
        elementDragStart(e) {
            if (status.isAddBox()) {
                status.setAddBox(false);
                e.dataTransfer.effectAllowed = 'move';
                e.dataTransfer.setData('index', e.target.dataset.index);
                e.dataTransfer.setData('locat', e.offsetX / e.target.clientWidth + ',' + e.offsetY / e.target.clientHeight);
                let editor = store.getEditor();
                let drop = (e) => {
                    let target = e.target;
                    while (target) {
                        if (!target.parentNode || target == editor) {
                            break;
                        } else {
                            target = target.parentNode;
                        }
                    }
                    if (target == editor) {
                        let id = e.dataTransfer.getData('index');
                        let locat = e.dataTransfer.getData('locat').split(',') ? e.dataTransfer.getData('locat').split(',') : null;
                        if (id && locat) {
                            let canvas = editor.getBoundingClientRect();
                            let baseElementList = template.getBaseElementList();
                            let element = util.clone(baseElementList.filter((item) => item.id === id)[0]);
                            if (baseElementList && id && element) {
                                let top = util.toInteger((e.y - canvas.y + editor.scrollTop) / (this.canvas.scale / 100) - element.style.height.value * Number(locat[1]));
                                let left = util.toInteger((e.x - canvas.x + editor.scrollLeft) / (this.canvas.scale / 100) - element.style.width.value * Number(locat[0]));
                                base.setTopPixel(element, this.canvas.height, top, false);
                                base.setLeftPixel(element, this.canvas.width, left, false);
                                element.id = util.getID();
                                element.attribute.page = 0;
                                store.addElement(element);
                                store.setCurrentElementList([element]);
                                line.setElement(element);
                                history.addHistory(store.clone(), 15);
                            }
                        }
                    }
                    status.setAddBox(true);
                    document.removeEventListener('dragover', dragover);
                    document.removeEventListener('drop', drop);
                };
                let dragover = (e) => {
                    e.preventDefault();
                    e.dataTransfer.dropEffect = 'move';
                };
                document.addEventListener('dragover', dragover);
                document.addEventListener('drop', drop);
            }
        },
        elementClick(event, id) {
            if (id) {
                let editor = store.getEditor();
                let canvas = editor.getBoundingClientRect();
                let baseElementList = template.getBaseElementList();
                let element = util.clone(baseElementList.filter((item) => item.id === id)[0]);
                if (baseElementList && element) {
                    let top = util.toInteger((canvas.height / 2) / (this.canvas.scale / 100) - element.style.height.value / 2);
                    let left = util.toInteger((canvas.width / 2) / (this.canvas.scale / 100) - element.style.width.value / 2);
                    base.setTopPixel(element, this.canvas.height, top, false);
                    base.setLeftPixel(element, this.canvas.width, left, false);
                    element.id = util.getID();
                    element.attribute.page = 0;
                    store.addElement(element);
                    store.setCurrentElementList([element]);
                    line.setElement(element);
                    history.addHistory(store.clone(), 15);
                }
                this.setMapLinkage(false, 0);
            }
        },
        onDragStart(e) {
            let id = e.target.row.id;
            this.$store.commit('setToolbarId', id);
        },
        menuClick(row, index, type) {
            if (type === 'menu') {
                if (row.id === this.active.id) {
                    if (this.active.id === 'multiMedia') {
                        this.scrollListener(false);
                    }
                    this.closePop();
                    return;
                }
                // 上一次点击的菜单是多媒体,清除事件
                if (this.active.id === 'multiMedia') {
                    this.scrollListener(false);
                }
                this.goBack();
                this.active = row;
                this.active.index = index;
                if (this.active.id === 'multiMedia') {
                    this.$nextTick(() => {
                        this.scrollListener();
                    });
                }
            } else if (type === 'element') {
                this.subTree = [];
                if (row.id === 'Templete') {
                    this.templateDialog.visible = true;
                    this.templateDialog.id = row.clickid;
                    return false;
                }
                if (!row.children) return;
                this.subActive.label = row.label;
                this.subTree = row.children;
            }
        },
        goBack() {
            this.subTree = [];
            this.subActive = {};
            this.recorScrolldNum = 18;
        },
        closePop() {
            this.subActive = {};
            this.active = {};
            this.recorScrolldNum = 18;
        },
        preview() {
            bus.setPreview(true);
            status.setShortcut(false);
        },
        setCanvasScale(type) {
            let step = 5;
            let min = 20;
            let max = 200;
            let num = this.canvas.scale;
            let styleData = {};
            if (type === 'plus') {
                styleData.scale = num + step >= max ? max : num + step;
            } else {
                styleData.scale = num - step <= min ? min : num - step;
            }
            styleData.scale = styleData.scale - (styleData.scale % step);
            store.setCanvas(styleData);
        },
        setCanvasPercentScale(e) {
            store.setCanvas({ scale: 100 });
        },
        autoCanvasScale(e) {
            let box = document.getElementById(window.getRootName() + 'SECTION_CONTENT').getBoundingClientRect();
            let width = 20; // 标尺的高度
            let scale1 = ((box.width - width) / store.getCanvas().width) * 100;
            let scale2 = ((box.height - width) / store.getCanvas().height) * 100;
            let canvas = {
                scale: scale1 > scale2 ? parseInt(scale2) : parseInt(scale1)
            };
            store.setCanvas(canvas);
        },
        canvasSizeChange(e) {
            if (this.canvas.layout == '3') {
                postion.setElementPostion(store.getElementList(), this.canvas.width, this.canvas.height);
            }
        },
        elementScroll: util.debounce(function($event) {
            let height = Math.ceil(($event.target.scrollTop + $event.target.clientHeight) / 87);
            if (this.recorScrolldNum > height * 6) return;
            this.recorScrolldNum = height * 6;
        }),
        getImgUrl(row, index) {
            if (index <= this.recorScrolldNum) {
                return row.icon;
            } else {
                return loadingImg;
            }
        },
        scrollListener(type = true) {
            let _this = this;
            let dom = document.getElementById(`${window.getRootName()}TOOLBAR_POP`);
            if (type) {
                dom.addEventListener('scroll', _this.elementScroll);
            } else {
                dom.removeEventListener('scroll', _this.elementScroll);
            }
        },
        setMapLinkage(flag, index) {
            this.$store.commit('setEnableInteract', flag);
            this.$store.commit('setMapActive', index);
            status.setShortcut(!flag);
        },
        shareProject: util.debounce(function(formName) {
            this.$refs[formName].validate(async(valid) => {
                if (valid) {
                    await this.save();
                    let router = this.$router.resolve({ path: PATH.VIEWER });
                    let param = {
                        token: user.getToken(),
                        name: this.shareForm.name,
                        port: '4322',
                        webui: `${window.location.origin}/${router.href}?id=${scene.getID()}&token=${user.getToken()}&viewer=1` 
                    };
                    let result = request.addtShortcut(param);
                    if (result.state.code === 10000) {
                        message.message('分享到桌面的快捷方式', 'success');
                        this.shareVisible = false;
                    } else {
                        message.message(result.body.message, 'error');
                    }
                } else {
                    return false;
                }
            });
        }, 500),
        save() {
            let canvas = store.getCanvas();
            if (util.isBlank(canvas.name)) {
                this.message('请输入大屏名称', 'warning');
            } else {
                let id = scene.getID();
                let projectAttr = store.clone();
                let blob = new Blob([JSON.stringify(projectAttr)]);
                let elementFile = new File([blob], 'attribute');
                let file = new FormData();
                file.set('token', user.getToken());
                file.set('name', canvas.name);
                file.set('attribute', elementFile);
                file.set('version', versionList[versionList.length - 1].version);
                if (!util.isBlank(id)) {
                    file.set('id', id);
                }
                if (canvas.icon && canvas.icon.indexOf('data:image') == 0) {
                    file.set('preview', util.base64ToFile(canvas.icon), '');
                }
                if (!util.isBlank(id)) {
                    return new Promise((resolve, reject) => {
                        updateTemplate(file).then(response => {
                            let result = response.data;
                            if (result && result.state && result.state.code && result.state.code === 10000) {
                                resolve(id);
                            } else {
                                message.message(result.body.message, 'error');
                                reject();
                            }
                        }).catch(error => {
                            reject();
                        })
                    })
                } else {
                    return new Promise((resolve, reject) => {
                        insertTemplate(file).then(response => {
                            let result = response.data;
                            if (result && result.state && result.state.code && result.state.code === 10000) {
                                scene.setID(result.body.message);
                                bus.getProjectLink();
                                resolve();
                            } else {
                                message.message(result.body.message, 'error');
                                reject();
                            }
                        }).catch(error => {
                            reject();
                        })
                    })
                }
            }
        },
        openShareDialog() {
            this.shareForm.name = this.canvas.name;
            let date = new Date();
            let y = date.getFullYear() + 100;
            let m = date.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            let d = date.getDate();
            d = d < 10 ? '0' + d : d;
            let h = date.getHours();
            h = h < 10 ? '0' + h : h;
            let minute = date.getMinutes();
            minute = minute < 10 ? '0' + minute : minute;
            this.shareForm.expiretime = `${y}-${m}-${d} ${h}-${minute}-00`;
        },
        closeShareDialog() {
            this.shareVisible = false;
            this.$refs.shareForm.resetFields();
        },
        getPreview(url) {
            return url ? `${config.getServiceURL('scene')}service/scene/file/download?file=${url}` : icon_default;
        },
        insertTempleteHandle() {
            let result = request.getTemplate({ token: user.getToken(), id: this.templateDialog.id });
            if (result.state.code === 10000) {
                let { attribute } = result.body.message;
                let state = JSON.parse(attribute);
                store.addTempleteElement(state);
                for (let index = 0; index < state.pageList.length; index++) {
                    const element = state.pageList[index];
                    store.addPage(element);
                }
                history.addHistory(store.clone(), 15);
                this.templateDialog.visible = false;
            } else {
                message.message(result.state.message, 'error');
                this.templateDialog.visible = false;
            }
        }
    },
    beforeDestroy() {
        shortcut.clearAutoSaveTimer();
        store.initialize();
        if (this.timer) {
            clearInterval(this.timer); // 清除定时器
        }
        if (user.getPanel() === 'true') {
            bus.off('elementClick', this.elementClick);
        }
    }
};
</script>
<style lang='scss' scoped>
@import '@/css/main/toolbar.scss';
.product-proxy {
    background: #fbec88;
    border: 1px solid #ccc;
    opacity: 0.6;
}
</style>